
<template>
  <div class="statistics-page">
    <el-row gutter="20">
      <!-- 各区域人口比重图表 -->
      <el-col :span="8">
        <el-card>
          <div ref="regionChart" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 男女比例图表 -->
      <el-col :span="8">
        <el-card>
          <div ref="genderChart" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 人口年龄分布图表 -->
      <el-col :span="8">
        <el-card>
          <div ref="ageChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>





<script>
import * as echarts from "echarts";
import { getPopulationCountByRegion } from "@/api/kesheSys/rk"; // 区域人口比重接口
import { getGlobalGenderStatistics, getGlobalAgeDistribution } from "@/api/kesheSys/rk"; // 男女比例和年龄分布接口

export default {
  name: "StatisticsPage",
  data() {
    return {
      // 图表实例
      regionChart: null, // 各区域人口比重图表实例
      genderChart: null, // 男女比例图表实例
      ageChart: null, // 年龄分布图表实例
      // 数据
      regionChartData: [], // 各区域人口比重数据
      genderData: [], // 男女比例数据
      ageData: [] // 年龄分布数据
    };
  },
  methods: {



    // 初始化区域人口比重图表
    initRegionChart() {
      if (!this.regionChart) {
        this.regionChart = echarts.init(this.$refs.regionChart);
      }
      const options = {
        title: {
          text: "区域人口统计",
          subtext: "统计数据",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          top: "bottom",
          data: this.regionChartData.map(item => item.name) // 动态加载区域名称
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "区域人口",
            type: "pie",
            radius: [20, 140], // 内外圆半径
            center: ["50%", "50%"], // 图表居中
            roseType: "radius", // 玫瑰图模式
            itemStyle: {
              borderRadius: 5 // 圆角样式
            },
            label: {
              show: false // 隐藏默认标签
            },
            emphasis: {
              label: {
                show: true // 悬浮时显示标签
              }
            },
            data: this.regionChartData // 使用动态数据
          }
        ]
      };
      this.regionChart.setOption(options);
    },


    // 获取区域人口比重数据
    fetchRegionChartData() {
      getPopulationCountByRegion()
        .then((response) => {
          this.regionChartData = response.data.map((item) => ({
            id: item.regionId, // 区域ID
            name: item.regionName,
            value: item.populationCount
          }));
          this.initRegionChart();
        })
        .catch((error) => {
          console.error("获取区域人口比重数据失败：", error);
          this.$message.error("无法加载区域人口比重数据！");
        });

    },

    // 初始化男女比例柱状图
    initGenderChart() {
      if (!this.genderChart) {
        this.genderChart = echarts.init(this.$refs.genderChart);
      }
      const options = {
        title: {
          text: "男女比例",
          subtext: "统计数据",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: ["男性", "女性"] // X轴标签
        },
        yAxis: {
          type: "value" // Y轴数值
        },
        series: [
          {
            data: [
              {
                value: this.genderData[0], // 男性数据
                itemStyle: {
                  color: "#4c8fe4" // 蓝色
                }
              },
              {
                value: this.genderData[1], // 女性数据
                itemStyle: {
                  color: "#e65ae2" // 红色
                }
              }
            ],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)" // 背景色
            }
          }
        ]
      };
      this.genderChart.setOption(options);
    },


    // 获取男女比例数据
    fetchGenderData() {
      getGlobalGenderStatistics()
        .then((response) => {
          this.genderData = [response.data.maleCount, response.data.femaleCount];
          this.initGenderChart();
        })
        .catch((error) => {
          console.error("获取男女比例数据失败：", error);
          this.$message.error("无法加载男女比例数据！");
        });
    },

    // 初始化人口年龄分布环形图
    initAgeChart() {
      if (!this.ageChart) {
        this.ageChart = echarts.init(this.$refs.ageChart);
      }
      const options = {
        title: {
          text: "人口年龄分布",
          subtext: "统计数据",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left" // 根据模板，图例在左侧垂直排列
        },
        series: [
          {
            name: "年龄分布",
            type: "pie",
            radius: "60%", // 模板中设置了固定的半径比例
            center: ["50%", "50%"], // 图表居中
            data: this.ageData, // 使用动态数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.ageChart.setOption(options);
    },


    // 获取人口年龄分布数据
    fetchAgeData() {
      getGlobalAgeDistribution()
        .then((response) => {
          this.ageData = [
            { value: response.data.ageGroup0To18, name: "0-18岁" },
            { value: response.data.ageGroup19To35, name: "19-35岁" },
            { value: response.data.ageGroup36To60, name: "36-60岁" },
            { value: response.data.ageGroup60Plus, name: "60岁以上" }
          ];
          this.initAgeChart();
        })
        .catch((error) => {
          console.error("获取人口年龄分布数据失败：", error);
          this.$message.error("无法加载人口年龄分布数据！");
        });
    }
  },
  mounted() {
    this.fetchRegionChartData(); // 获取区域人口比重数据
    this.fetchGenderData(); // 获取男女比例数据
    this.fetchAgeData(); // 获取人口年龄分布数据
  }
};
</script>


<style scoped>
/* 页面样式 */
.statistics-page {
  padding: 50px;

}

/* 图表容器样式 */
.chart-container {
  width: 100%;
  height: 600px;


}
</style>

